<template>
  <vis-container class="overview-data" title="参评区域及数据概览" title-bg-size="275">
    <ul class="data-wrapper">
      <li class="data-item">
        <p class="label">{{ provinceData.label }}</p>
        <p class="number">
          <span v-for="(data, index) in provinceData.number" :key="index">
            <NumberItem :number="data" />
          </span>
        </p>
      </li>
      <li
        class="data-item"
        :class="{ active: activeIndex === index }"
        v-for="(data, key, index) in dataItem"
        :key="index"
        @mouseover="handleOver(index)"
        @mouseout="handleMouseOut"
      >
        <DataItem :data="data" />
      </li>
    </ul>
  </vis-container>
</template>

<script lang="ts">
import { autoLoop } from '@/config'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import TimerMixins from './timerMixins'

interface DataItem {
  [key: string]: any
}

@Component({
  name: 'OverviewData',
  mixins: [TimerMixins]
})
export default class OverviewData extends Vue {
  @Prop({
    type: Object
  })
  data!: DataItem
  @Prop({
    type: [String, Number]
  })
  title!: string | number

  @Watch('activeIndex')
  handler(this: any) {
    const { getOnlineDataFn, allData } = this.$parent
    if (getOnlineDataFn && allData) {
      getOnlineDataFn(allData)
    }
  }

  timerMaxLength = 4
  get provinceData() {
    try {
      const { title } = this.$props
      const { label = `参评${title}`, number = 0 } = this.data.province || {}
      return {
        label,
        number: number.toString().split('')
      }
    } catch (e) {
      return {
        label: `参评${this.$props.title}`,
        number: 0
      }
    }
  }
  get dataItem() {
    return Object.keys(this.data)
      .filter((key: string) => key !== 'province')
      .reduce((pre: any, cur: any) => {
        pre[cur] = this.data[cur]
        return pre
      }, {})
  }
  handleOver(this: any, index: number) {
    this.handleMouseOver()
    this.activeIndex = index
  }
  mounted(this: any) {
    if (autoLoop) {
      this.startTimerFn()
    }
  }
}
</script>
<style lang="scss" scoped>
.overview-data {
  .data-wrapper {
    padding-top: 0.22rem;
  }

  .data-item {
    display: flex;
    cursor: pointer;
    transition: all 0.3s;
    align-items: center;

    &.active {
      transform: scale(1.2);
    }

    &:not(:last-child) {
      margin-bottom: 0.4rem;
    }

    .number {
      margin-left: auto;
    }
  }
}
</style>
